<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	request.setAttribute("path", request.getContextPath());
	request.setAttribute("jsPath", path+"/js");
	request.setAttribute("cssPath", path+"/css");
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户角色管理</title>
	

  <!-- 页面js调用部分 -->
<!-- Mainly scripts -->
<!-- <script src="/js/jquery-2.1.1.min.js"></script> -->
<script src="/js/bootstrap.min.js?v=3.4.0"></script>
<script src="/js/jquery.metisMenu.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/pace.min.js"></script>


<!-- 树形文件 css&js -->
   <!--  <script type="text/javascript" src=" /js/jquery-1.7.2.js"></script> -->
    
	<link rel="stylesheet" type="text/css" href="/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.less"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/fa.less"/>
    <link rel="stylesheet" type="text/css" href="/css/metroStyle/metroStyle.css"/>
   
    <link rel="stylesheet" href="/css/demo.css" type="text/css">
	<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 
	<!-- 树形文件 -->
	
	<!-- zyTable --> 
	<link rel="stylesheet" type="text/css" href="/plugs/bootstrap-ui/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/plugs/button/css/component.css">
	<link rel="stylesheet" type="text/css" href="/plugs/checkbox/style.css">
	
			
	<!-- 加载zyPopup弹出层的样式 -->
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/demo.css"/>
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog-sandra.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/css/zyPopup.css" />		
	<link rel="stylesheet" type="text/css" href="/css/table.css">
	<!-- 引用公共JS -->
		
	<script type="text/javascript" src="/plugs/paging/js/jquery.pagination.js"></script>
			
	<!-- 加载zyPopup弹出层的脚本 -->
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/modernizr.custom.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/classie.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/dialogFx.js"></script>
	<script type="text/javascript" src="/js/admin/zpUerrole.js"></script>

	<script type="text/javascript" src="/js/admin/uerrole.js"></script> 
	<!-- zyTable --> 
	
	<!-- css调用 -->
<link href="/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.3.0" rel="stylesheet">
<link href="/css/morris-0.4.3.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="/css/jquery.gritter.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css?v=2.2.0" rel="stylesheet">
	
	<script type="text/javascript">	

		$(function() {
			// 初始化插件
			$(".table").table({
				"width"      : 400,
				"height"     : 250,
				"field"      : [{"id":"userroleId", "name":"ID", "width":100},{"id":"staffNum", "name":"账户", "width":100},{"id":"chnName", "name":"中文名", "width":100},{"id":"sysroleName","name":"所属角色","width":100},{"id":"ageLimit","name":"任职时长","width":150},{"id":"mobile","name":"联系方式","width":100}],
				//"adaptive"   : true, // 数据源字段自适应宽度方式
				"adaptive"   : false, // 数据源字段自适应宽度方式
				"pattern"    : false, // 模式   true:字段方式获取数据   false:普通添加方式获取数据
				"example"    : true,  // 实例   当前创建的是否是model中的实例
				"check"      : true,  // 全选
				"number"     : true,  // 序号
				"edit"       : true,  // 编辑
				"del"        : true,  // 删除
				"allDel"     : true,  // 全部删除
				"add"     	 : true,  //新增
				"filter"     : true,  // 过滤
				"paging"     : false,  // 分页条
				"zebra"      : true,  // 斑马线
				"dataTotal"  : 30,     // 数据总个数
				"rowsPerPage": 10,     // 一页多少行数据
				"pagingComplete": function(nNowPage){  // 翻页的回调方法
					console.info("用户定义翻页回调:");
					console.info(nNowPage);
					// 翻页添加数据
					var data = [];
					<c:forEach var="s" items="${infos}">
						data.push({"ID":"${s.functionauthorityId}","NAME":"${s.name}","KeyValue":"${s.keyValue}","CreateTime":"${s.createTime}"});
					</c:forEach>
					
					$(".table").table("addData", data);
				},
				"delComplete": function(aRowId){  // 删除数据的回调方法
					if(aRowId.length>0){
						var delArray=[];
						for (var i = 0; i < aRowId.length; i++) {
								delArray.push(aRowId[i].userroleId);
							}						
							var url = "${path}/admin/userrole/del";
							var params = "delArray="+delArray;
							$.post(url,params,function($data){
								console.info($data);
								var code = $data.code;
								var message = $data.message;
								if(code==1){
									//删除成功
									//做你想做的事情，提示成功，跳转页面
									alert("删除成功！");
									
								}else{
									alert(message);
								}
							},"json");
					}
				},
				"editComplete": function(afterData,beforeData){  //编辑数据的回调方法
					alert("aaa");
					console.info("用户定义编辑回调:");
					console.info(afterData);
					console.info(beforeData);
				}
			});

			// 初始化添加数据
			var data = [];
			<c:forEach var="infoVo" items="${listVo}">
				data.push({"userroleId":"${infoVo.userroleId}","staffNum":"${infoVo.staffNum}","chnName":"${infoVo.chnName}","sysroleName":"${infoVo.sysroleName}","ageLimit":"${infoVo.ageLimit}","mobile":"${infoVo.mobile}"});
			</c:forEach> 
			$(".table").table("addData", data);
			
			var str="";
			<c:forEach var="sy" items="${sysroleList}">
				str+="<option value='${sy.roleId}'>${sy.name}</option>";
			</c:forEach>
			$(".item select").append(str);
			
			
			
			//修改
			$("#confirm").click(function(){
				var url="${path }/admin/userrole/update";
				var id=$("#1editPopup_userroleId").find("input").val();
				var roleId=$("#1editPopup_sysroleName").find("select").val();
				
				if(roleId==0){
					return;
				}
				var params = "userroleId="+id+"&roleId="+roleId;
				console.info(params);
				$.post(url,params,function($data){
					console.info($data);
					var code = $data.code;
					var message = $data.message;
					if(code==1){
						alert("修改成功！");
						$('#userroleSearchForm').submit();
					}else{
						alert(message);
					}
				},"json");
			})
			
		});
		
		//新增
		function showAdd(){
			//alert("新增！");
			var url = "${path}/admin/userrole/showAdd";
			window.open(url,"showAdd");
		}
		
		function search(){
			$("#pageNum").val(1);
			$('#userroleSearchForm').submit();
		}
	
		
		function goPage(pageNum){
			//alert(1);
			$("#pageNum").val(pageNum);
			$('#userroleSearchForm').submit();
		}
		
		
	</script>
	
	
	<style type="text/css">
	.box_context{
		margin:10px 10px;
	}
	article .staffInfo{
		overflow:hidden;
		height: 400px;
	}
	.page{
		text-align: center;
	}
	.pagination{
	
		width:230px;
		text-align:center;
		margin:10px auto;
	}
	
	.sysroleName{
		display: block;
	    float: left;
	    height: 35px;
	    line-height: 35px;
	    margin-right: 10px;
	    text-align: right;
	    width: 160px;
	}
	
	.item select{
		height: 35px;
	    line-height: 35px;
	    border: 1px solid #dfdfdf;
	    padding: 2px 5px;
	    width: 250px;
	}
	

</style>
	
</head>
<body>
	<div id="wrapper">
		
	<!-- 左边导航 -->
	<%@ include file="../share/leftMenu.jsp" %>
				
	<div id="page-wrapper" class="gray-bg dashbard-1"> 
	<!-- 头部 -->
	<%@ include file="../share/head.jsp" %>
		
		

      <!--------------------------
        | 请将正文内部分写在这里 |
        -------------------------->
        <div class="box_context">
			<c:if test="${message!=null}">
				<span style="color: red">${message}</span>
			</c:if>
			
			<form id="userroleSearchForm" action="${path}/admin/userrole/showUserrole" method="get">
				
				<label>中文名：</label>
				<input type="text" name="staffName" value="${userroleVo.staffName}" />
				<label>角色名：</label>
				<input type="text" name="sysroleName" value="${userroleVo.sysroleName}" />
				<input type="hidden" id="pageNum" name="pageNum" value="${userroleVo.pageNum}"/> 
				<input type="button" value="查询" onclick="search()"/>
			</form>
		</div>
	 <article>
	 	
	 
	       <div class="staffInfo">
	       		<!-- style控制zyTable最外层样式,如果需要改变宽度可以设置width -->
	           <div style="width:1100px;height:400px;position: absolute;margin-left:0%;margin-top:10px;">
					<div class="table"></div>
				</div>
	        	<div class="rightInfo">
	        		<!-- 如果要用tree插件取消一下代码和jquery的注释  -->
		        	<!-- <div class="content_wrap">
						<div class="zTreeDemoBackground left">
							<ul id="treeDemo" class="ztree"></ul>
						</div>		
					</div> -->
				<div class="tips">
				<c:if test="${not empty message}">
					${message}
				</c:if>
				</div>
		        </div>
	           <!--  <img src="/img/jiantouleft.png"> -->
	      		</div>
	      		
	      		
	      		
	      		
	      		
	      		
	      		
	    </article>
	    
	    <%-- 分页--%>
			<div class="page">
        		<ul class="pagination">
        					<c:if test="${toolPage<3 }">
        						<c:if test="${toolPage==1 && userroleVo.pageNum==1}">
	        						<c:forEach var="i" begin="1" end="1">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
	        					</c:if>
	        					<c:if test="${toolPage==2 && userroleVo.pageNum==1}">
	        						<c:forEach var="i" begin="1" end="2">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${userroleVo.pageNum+1})">Next</a></li>
	        					</c:if>
	        					<c:if test="${toolPage==2 && userroleVo.pageNum==2}">
	        					<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${userroleVo.pageNum-1})">Previous</a></li>
	        						<c:forEach var="i" begin="1" end="2">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
	        					</c:if>
        					</c:if>
        					<c:if test="${toolPage>=3 }">
	        					<c:if test="${userroleVo.pageNum==1}">
	        						<c:forEach var="i" begin="1" end="3">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${userroleVo.pageNum+1})">Next</a></li>
	        					</c:if>
								<c:if test="${userroleVo.pageNum>1 && userroleVo.pageNum<=2 }">
									<c:if test="${toolPage<3}">
									<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${userroleVo.pageNum-1})">Previous</a></li>
										<c:forEach var="i" begin="1" end="${toolPage}">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${userroleVo.pageNum+1})">Next</a></li>
				                 	</c:if>
				                 	<c:if test="${toolPage>=3}">
										<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${userroleVo.pageNum-1})">Previous</a></li>
										<c:forEach var="i" begin="1" end="3">
											<li class="paginate_button">
						                    <a href="javaScript:void(0)" 
						                    aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 	</c:forEach>
				                 		<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${userroleVo.pageNum+1})">Next</a></li>
				                 	</c:if>
								</c:if>
								<c:if test="${userroleVo.pageNum>2 and toolPage>=(userroleVo.pageNum+1)}">
									<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${userroleVo.pageNum-1})">Previous</a></li>
									<c:forEach var="i" begin="${userroleVo.pageNum-1 }" end="${userroleVo.pageNum+1 }">
									<li class="paginate_button"><a href="javaScript:void(0)" aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 </c:forEach>
									<li class="paginate_button next" id="example2_next"><a
									href="javaScript:void(0)" aria-controls="example2" data-dt-idx="7" tabindex="0" onclick="goPage(${userroleVo.pageNum+1})">Next</a></li>
								</c:if>
								<c:if test="${userroleVo.pageNum==toolPage}">
									<li class="paginate_button previous disabled"
									id="example2_previous"><a href="javaScript:void(0)" aria-controls="example2"
									data-dt-idx="0" tabindex="0" onclick="goPage(${userroleVo.pageNum-1})">Previous</a></li>
									<c:forEach var="i" begin="${userroleVo.pageNum-1 }" end="${toolPage}">
									<li class="paginate_button"><a href="javaScript:void(0)" aria-controls="example2" data-dt-idx="${i}" tabindex="0" onclick="goPage(${i})">${i}</a></li>
					                 </c:forEach>
								</c:if>
							</c:if>
							
						</ul>
        </div>
	    
	    
	<!-- 正文结束 -->
	</div>
	</div>

</body>
</html>